<template>
  <div class="app-container">
    <div class="device-container">
      <div id="tips">
        <h4 style="font-family: wryh;">暂无数据上报，请稍等... </h4>
      </div>
      <div class="device" v-for="(item, index) in iotd"> <!--从数组中取对象-->
        <div v-for="(value, key) in item"> <!--遍历对象-->
          <div class="title" v-if="key == 'name'">
            {{ value }}
          </div>
          <div v-if="key == 'data'">
            <div style="margin: 10px 10px 5px 5px;" v-for="(obj, index) in value">
              <span class="iname">{{ index.split("#")[0] }}</span>
              <span class="ivalue">{{ obj }}</span>
              <span class="danwei">{{ index.split("@")[1] }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
body {
  background-color: ghostwhite;
}

.device-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /*
  border: solid 1px yellow;
  */
  justify-content: flex-start;
}

.device {
  margin-top: 15px;
  margin-left: 20px;
  width: 15%;
  border-radius: 15px;
  background-color: white;
  /*
  border: solid 1px red;
  */
}

.title {
  background-color: #ecf5ff;
  height: 50px;
  display: flex;
  align-items: center;
  font-family: wryh;
  font-size: 18px;
  font-weight: bold;
  padding-left: 10px;
  border-radius: 15px 15px 0 0;
}

.iname {
  color: rgb(153, 153, 153);
  padding-left: 10px;
  font-family: wryh;
}

.ivalue {
  margin-left: 16px;
  font-weight: bold;
  font-family: wryh;
}

.danwei {
  margin-left: 10px;
  font-family: wryh;
}

</style>
<script>
import mqtt from 'mqtt'
import {listDevices} from "@/api/iot/mon";

export default {
  name: "Iotman",
  dicts: ['sys_normal_disable', 'sys_dept_level', 'sys_dept_type'],
  mounted() {
    const options = {
      clean: true,
      connectTimeout: 4000,
      clientId: 'iot_web@' + Date.now(),
      username: '物联网设备监测',
      password: '',
      keepalive: 60,
      port: 9083
    }
    this.client = mqtt.connect('ws://116.205.137.7:9083/mqtt', options)
    this.client.on('connect', e => {
      console.log('连接成功', e)

      // 查询盒子列表，组装订阅结果
      listDevices().then(res => {
        if (res.code == 200) {
          var attr = res.data;
          for (var a = 0; a < attr.length; a++) {
            var tmp = attr[a];
            this.client.subscribe('sys/device/' + tmp.code + '/variant_data', (err) => {
              if (!err) {
                console.log('订阅成功:' + 'sys/device/' + tmp.code + '/variant_data')
              }
            })
          }
        }
      })
    })
    /**
     * 这是一个盒子上报的完整数据
     *    一个盒子 -->  井1
     *                     --> 指标1
     *                     --> 指标2
     *                     --> 指标3
     *                井1
     *                井2
     *  数据结构：
     *    指标名称#井名称@单位：指标值。
     *
     *   卡片显示是以“井名称”作为维度，所以“井名称”必须唯一。当多个“盒子”上报数据时，需要做到的是
     *   更新而非直接覆盖
     *
     */
      // 原始数据
    var src = {
        "id": "admin",
        "type": "write_variant",
        "version": "1.0",
        "time": "1600324099000",
        "params": {
          "分水器压力#分水器压力@MPa": 0,
          "压力#1号注水井@MPa": 0,
          "压力#2号注水井@MPa": 0,
          "瞬时流量#1号注水井@m³/h": 82,
          "瞬时流量#2号注水井@m³/h": 82,
          "累计流量#1号注水井@m³": 45487,
          "累计流量#2号注水井@m³": 45487,
          "设定流量#1号注水井@m³/h": 82,
          "设定流量#2号注水井@m³/h": 82
        }
      }
    // 处理后的目标数据
    var tar = [{
      "name": "分水器压力",
      "data": {
        "分水器压力#分水器压力@MPa": 0
      }
    }, {
      "name": "1号注水井",
      "data": {
        "压力#1号注水井@MPa": 0,
        "瞬时流量#1号注水井@m³/h": 83,
        "累计流量#1号注水井@m³": 45499,
        "设定流量#1号注水井@m³/h": 82
      }
    }, {
      "name": "2号注水井",
      "data": {
        "压力#2号注水井@MPa": 0,
        "瞬时流量#2号注水井@m³/h": 83,
        "累计流量#2号注水井@m³": 45499,
        "设定流量#2号注水井@m³/h": 82
      }
    }];
    this.client.on('message', (topic, message) => {
        var _this = this;
        var msg = JSON.parse(message.toString())
        //console.info(msg)
        console.info(JSON.stringify(msg))
        var c1 = msg.params;
        var jingAttr = new Array(); // 本次上报时一共有多少个井
        for (let key in c1) { // 1、遍历对象，抽取key，识别井名称
          var jname = key.split("#")[1].split("@")[0];
          jingAttr.push(jname);
        }
        // TODO 待优化：同卡片上的井做比较，此次无上报数据时，删除卡片上存在的井（20230830），目前页面刷新一下既可以剔除不上班数据的卡片。
        const uniqueArr = [...new Set(jingAttr)];// 2.使用set结构进行去重
        var jingNowAttr = new Array(); //3.构建各自井的指标
        for (var i = 0; i < uniqueArr.length; i++) {
          var jingObj = new Object();  // 井对象
          jingObj["name"] = uniqueArr[i];
          var tmp = new Object();
          for (var key in c1) {
            if (key.indexOf(uniqueArr[i]) > -1) { //指标是否属于当前井
              tmp[key] = c1[key];
            }
          }
          jingObj["data"] = tmp;
          jingNowAttr.push(jingObj)
        }

        for (var a = 0; a < jingNowAttr.length; a++) { // 本次上报新数据
          var nowobj = jingNowAttr[a];
          var mzd = true;
          for (var b = 0; b < _this.iotd.length; b++) { // 卡片展示数据
            var lastobj = _this.iotd[b];
            if (lastobj["name"] == nowobj["name"]) { // 查找当前数据是否已经在页面上显示
              lastobj["data"] = nowobj["data"]; // 更新卡片上的数据
              mzd = false;
              break;
            }
          }
          if (mzd) { // 遍历完成整个卡片，没有找到数据，认为是需要新增指标或者是其它盒子上报的数据。
            _this.iotd.push(nowobj);
          }
        }
        // 移除 tips
        var tips = document.getElementById("tips");
        if (tips != null){
          tips.remove();
        }
        /*_this.iotd.sort((a, b) => { // 根据井号进行排序
          return a.name - b.name;
          //return a.name.split("#")[1] - b.name.split("#")[1]
        })*/
        //console.log(JSON.stringify(this.iotd))
      }
    )

    this.client.on('reconnect', (error) => {
      console.log('正在重连：' + error)
    })

    this.client.on('error', (error) => {
      console.log('连接失败：' + error)
    })
  },
  data() {
    return {
      iotd: [],
      attr1: [{
        "name": "#1号采气井",
        "data": {
          "压力#1一号采气井@MPa": 0,
          "瞬时流量#1一号采气井@m³/h": 42,
          "累计流量#1一号采气井@m³/h": 4427942,
          "设定流量#1一号采气井@m³/h": 42
        }
      }]
    };
  }
  ,
  created() {
    this.init();
  }
  ,
  methods: {
    init() {

    }
  }
};
</script>
